<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ATM-模拟</title>
    <script src="sdk/jquery-1.10.min.js"></script>
    <style>
        body, html {
            margin: 0;
            height: 100%;
        }

        .content {
            color: white;
            font-weight: bold;
            font-size: 25px;
            margin: 0 auto;
            margin-top: 250px;
            width: max-content;
        }

        button {
            height: 85px;
            width: 200px;
            background-color: #d7d7d7;
            font-size: 20px;
            font-weight: bold;
            border: 0;
        }
    </style>
</head>
<body>
<div style="margin: 0 auto;overflow: hidden;height: 15%;">
    <div style="float: left;margin: 10px;">
        <img src="img/信工logo.jfif" width="100px" alt="信工logo">
    </div>
    <div style="float: left;margin-left: 10px;">
        <span style="font-size: 50px;font-weight: bold;">中国儿童银行</span>
        <br>
        <span style="font-size: 35px;font-weight: bold;">China Child Bank</span>
    </div>
</div>


<div style="background-color: #330099;overflow: hidden;height: 85%;">
    <div style="float: left;width: 15%;">
        <button style="margin-top: 100px;border-bottom-right-radius: 10px;border-top-right-radius: 10px;box-shadow: 1px 1px 5px black;"
                onclick="cash()">取款 <br> Cash
        </button>
        <br>
        <button style="margin-top: 120px;border-bottom-right-radius: 10px;border-top-right-radius: 10px;box-shadow: 1px 1px 5px black;"
                onclick="amountTransfer()">转账 <br> Transfer
        </button>
        <br>
        <button style="margin-top: 120px;border-bottom-right-radius: 10px;border-top-right-radius: 10px;box-shadow: 1px 1px 5px black;"
                onclick="record()">近期记录 <br> Recent Records
        </button>
        <br>
        <button style="margin-top: 130px;border-bottom-right-radius: 10px;border-top-right-radius: 10px;box-shadow: 1px 1px 5px black;color: red;"
                onclick="exit()">退出 <br> Exit
        </button>
    </div>
    <div style="float: left;width: 70%;">
        <div class="content">
            <h1 style="color: white;">尊敬的<span id="username"></span>，欢迎使用！</h1>
        </div>
    </div>
    <div style="float:right;width: 15%;">
        <button style="margin-top: 100px;border-bottom-left-radius: 10px;border-top-left-radius: 10px;box-shadow: -1px 1px 5px black;float: right;"
                onclick="balance()">余额 <br> Balance
        </button>
        <br>
        <button style="margin-top: 120px;border-bottom-left-radius: 10px;border-top-left-radius: 10px;box-shadow: -1px 1px 5px black;float: right;"
                onclick="deposit()">存款 <br> Deposit
        </button>
        <br>
        <button style="margin-top: 120px;border-bottom-left-radius: 10px;border-top-left-radius: 10px;box-shadow: -1px 1px 5px black;float: right;"
                onclick="changePassword()">修改密码 <br> Change Password
        </button>
    </div>
</div>


<script>

    $(function () {
        $.ajax(
            {
                url: "http://localhost:8888/atm/api/checkToken?token=" + localStorage.getItem("token"),
                type: "POST",
                datatype: "json",
                success: function (res) {
                    if (res.code === 10001){
                        alert("登录异常，请重新登录")
                        exit()
                    }
                },
                error: function (){
                    alert("服务器异常！")
                }
            }
        )

        $.ajax(
            {
                url: "http://localhost:8888/atm/api/username?token=" + localStorage.getItem("token"),
                type: "POST",
                datatype: "json", // 返回的数据格式
                success: function (res) {
                    if (res.code === 10001){
                        alert("登录异常，请重新登录")
                        exit()
                        return;
                    }
                    if (res.code === 200) {
                        $("#username").text(res.data)
                        return;
                    }
                    alert("获取账户信息失败," + res.message)
                },
                error: function () {
                    alert("服务器异常！")
                }
            }
        )
    })

    function record() {
        window.location = "./chooseRecord.html"
    }

    function cash() {
        window.location = "./cash.html"
    }

    function amountTransfer() {
        window.location = "./transfer.html"
    }

    function balance() {
        window.location = "./balance.html"
    }

    function deposit() {
        window.location = "./deposit.html"
    }

    function changePassword() {
        window.location = "./changePassword.html"
    }

    function exit() {
        window.location = "./login.html"
        localStorage.clear();
    }
</script>
</body>
</html>